<template>
  <div>
    <!-- 一条文章单元格 -->
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div
          class="title-box"
          @click="jump(arr.art_id)"
        >
          <!-- 标题 -->
          <span>{{arr.title}}</span>
          <!-- 单图 -->
          <img
            class="thumb"
            :src="arr.cover.images[0]"
            v-if="arr.cover.type===1"
          />
          <!-- 三张图片 -->
          <div
            class="thumb-box"
            v-if="arr.cover.type>1"
          >
            <img
              class="thumb"
              v-for="(imgurl,index) in arr.cover.images"
              :key="index"
              :src="imgurl"
            />
          </div>
        </div>

      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>作者{{arr.aut_name}}</span>
            <span>{{arr.comm_count}}评论</span>
            <span>{{fromTime(arr.pubdate)}}</span>
          </div>
          <!-- 一级面板 -->
          <van-action-sheet
            v-model="show"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            get-container='body'
            @select='gettingInfor'
          >

          </van-action-sheet>
          <!-- 二级面板 -->
          <van-action-sheet
            v-model="showr"
            :actions="action"
            cancel-text="返回"
            @cancel='show=!show'
            @select='gettingInfo'
            duration='0'
            close-on-click-action
          ></van-action-sheet>
          <!-- 反馈按钮 -->
          <van-icon
            name="cross"
            @click="togle(arr.art_id)"
          />
          <van-dialog
            v-model="show3"
            title="请输入你要反馈的问题"
            show-cancel-button
          >
            <van-cell-group>
              <van-field
                v-model="value"
                placeholder="请输入反馈的问题"
              />
            </van-cell-group>
          </van-dialog>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
// 导入局部组件必须在scrip里面导入,在App里面导入
import moment from 'moment'
import { getDareNotInterested, getUsersReport } from '@/api/home.js'
export default {
  // 组件名称
  name: 'articles',
  // 组件参数 接收来自父组件的数据
  props: {
    arr: {
      type: Object,
      required: true
    },
    arry: {
      type: Array
    },
    i: {
      type: Number
    }
  },
  // 接收局部注册的组件
  components: {},
  // 组件数据
  data () {
    return {
      value: null,
      showr: false,
      show: false, // 一级面板的现实或者隐藏
      show3: false,
      actions: [
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ],
      action: [
        { name: '其他问题', id: '0' },
        { name: '标题夸张', id: '1' },
        { name: '低俗涩情', id: '2' },
        { name: '错别字多', id: '3' },
        { name: '旧闻重复', id: '4' },
        { name: '内容不适', id: '6' },
        { name: '侵权', id: '8' },
        { name: '广告软文', id: '5' },
        { name: '涉嫌违法犯罪', id: '7' }
      ],
      // 文章id
      id: null
    }
  },
  methods: {
    togle (id) {
      this.show = !this.show
      this.id = id
    },
    // 点击一级弹出层
    async gettingInfor (obj) {
      // 获取弹出层信息
      // console.log(obj.name)
      if (obj.name == '不感兴趣') {
        try {
          await getDareNotInterested(this.id)
          // console.log(ary.data);
          this.$toast({
            message: '反馈成功',
            icon: 'like-o'
          })
          // console.log(this.arry);
          this.arry.splice(this.i, 1)
        } catch (error) {
          console.log(error)
        }
      } else if (obj.name == '反馈垃圾内容') {
        this.showr = !this.showr
      }
    },
    // 点击二层弹出层
    gettingInfo (obj) {
      // console.log(obj.id);
      try {
        if (obj.name == '其他问题') {
          this.show3 = !this.show3
          getUsersReport({
            target: this.id,
            type: obj.id,
            remark: this.value
          })
          this.value = ''
        } else {
          getUsersReport({
            target: this.id,
            type: obj.id
          })
        }
      } catch (error) {

      } finally {
        this.$toast({
          message: '反馈成功',
          icon: 'like-o'
        })
      }
    },
    fromTime (val) {
      moment.locale('zh-cn')
      return moment(val).from(new Date())
    },
    // 发送文章id给文章详情页
    jump (id) {
      // console.log(id)
      this.$router.push({
        name: 'reda',
        params: {
          id: id
        }
      })
    }

  },
  computed: {

  },
  created () {
    // console.log(this.arr);
  }
}
</script>
<style lang='less' scoped>
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}
/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
}
</style>
